<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width" />
    <title>Media Error Dialog</title>
    <script type="module" src="../../../dist/index.js"></script>
    <script type="module">
      import { CustomVideoElement } from 'https://cdn.jsdelivr.net/npm/custom-media-element/+esm';

      class CustomVideo extends CustomVideoElement {
        #error;

        get error() {
          return this.#error ?? super.error;
        }

        set error(value) {
          this.#error = value;
        }
      }

      globalThis.customElements.define('custom-video', CustomVideo);
    </script>

    <style>
      h2 {
        margin-top: 2rem;
      }

      /** add styles to prevent CLS (Cumulative Layout Shift) */
      media-controller:not([audio]) {
        display: grid;          /* expands the container if preload=none */
        max-width: 540px;       /* allows the container to shrink if small */
        aspect-ratio: 16 / 9;   /* set container aspect ratio if preload=none */
      }

      video,
      img[slot="poster"] {
        grid-area: 1 / 1;     /* position poster img on top of video element */
        width: 100%;          /* prevents video to expand beyond its container */
      }

      .examples {
        margin-top: 20px;
      }
    </style>
  </head>
  <body>
    <h1>MediaErrorDialog</h1>

    <h2>Non existing mp4</h2>

    <media-controller defaultsubtitles>
      <custom-video
        slot="media"
        src="https://stream.mux.com/Sc89iWAyNkhJ3P1rQ02nrEdCFTnfT01CZ2KmaEcxXfB00/low.mp4"
        muted
        crossorigin
      ></custom-video>
      <img slot="poster" src="https://image.mux.com/Sc89iWAyNkhJ3P1rQ02nrEdCFTnfT01CZ2KmaEcxXfB008/thumbnail.webp?time=13" />
      <media-loading-indicator slot="centered-chrome" noautohide></media-loading-indicator>
      <media-error-dialog slot="dialog"></media-error-dialog>
      <media-control-bar>
        <media-play-button></media-play-button>
        <media-mute-button></media-mute-button>
        <media-time-range></media-time-range>
        <media-time-display></media-time-display>
        <media-fullscreen-button></media-fullscreen-button>
      </media-control-bar>
    </media-controller>

    <h2>Custom error code for custom media elements</h2>
    <script>
      function setCustomError() {
        const video = document.querySelector('custom-video');
        const customError = new Error('This is a custom error with code 42!');
        customError.code = 42;
        video.error = customError;
        video.dispatchEvent(new Event('error'));
      }
    </script>
    <button onclick="setCustomError()">Set error code 42</button>

    <h2>Hide error on recovery</h2>

    <media-controller defaultsubtitles>
      <custom-video
        id="recoverable-video"
        slot="media"
        src="https://stream.mux.com/Sc89iWAyNkhJ3P1rQ02nrEdCFTnfT01CZ2KmaEcxXfB008/low.mp4"
        muted
        crossorigin
      ></custom-video>
      <img slot="poster" src="https://image.mux.com/Sc89iWAyNkhJ3P1rQ02nrEdCFTnfT01CZ2KmaEcxXfB008/thumbnail.webp?time=13" />
      <media-loading-indicator slot="centered-chrome" noautohide></media-loading-indicator>
      <media-error-dialog slot="dialog"></media-error-dialog>
      <media-control-bar>
        <media-play-button></media-play-button>
        <media-mute-button></media-mute-button>
        <media-time-range></media-time-range>
        <media-time-display></media-time-display>
        <media-fullscreen-button></media-fullscreen-button>
      </media-control-bar>
    </media-controller>
    <br>
    <button onclick="recoverAndPlay()">Play</button>

    <script>
      function setError() {
        const video = document.querySelector('#recoverable-video');
        const customError = new Error('');
        customError.code = 2;
        video.error = customError;
        video.dispatchEvent(new Event('error'));
      }

      setError();

      function recoverAndPlay() {
        const video = document.querySelector('#recoverable-video');
        video.play();
      }
    </script>

    <div style="max-width: 540px">
      <h2>No error code (should not display or fade out on page load)</h2>
      <media-error-dialog></media-error-dialog>

      <h2>Empty error code (should not display or fade out on page load)</h2>
      <media-error-dialog mediaerrorcode=""></media-error-dialog>

      <h2>Error 2 (MEDIA_ERR_NETWORK)</h2>
      <media-error-dialog mediaerrorcode="2"></media-error-dialog>

      <h2>Error 3 (MEDIA_ERR_DECODE)</h2>
      <media-error-dialog mediaerrorcode="3"></media-error-dialog>

      <h2>Error 4 (MEDIA_ERR_SRC_NOT_SUPPORTED)</h2>
      <media-error-dialog mediaerrorcode="4"></media-error-dialog>

      <h2>Error 5 (MEDIA_ERR_ENCRYPTED)</h2>
      <media-error-dialog mediaerrorcode="5"></media-error-dialog>

      <h2>Error 2 with custom error content via <code>error-2</code> slot</h2>
      <media-error-dialog mediaerrorcode="2">
        <h3 slot="error-2">Custom Error 2</h3>
        <p slot="error-2">This is a custom message</p>
      </media-error-dialog>

      <h2>Error 2 with custom error title via <code>error-2-title</code> slot</h2>
      <media-error-dialog mediaerrorcode="2">
        <h3 slot="error-2-title">Custom Error 2 Title</h3>
      </media-error-dialog>

      <h2>Error 2 with custom error message via <code>error-2-message</code> slot</h2>
      <media-error-dialog mediaerrorcode="2">
        <p slot="error-2-message">This is a custom message</p>
      </media-error-dialog>

    </div>

    <br>

    <div class="examples">
      <a href="../">View more examples</a>
    </div>
  </body>
</html>
